<template>
  <div class="offices-box">
    <!-- <div ref="pdfContainer" class="pdf-container">
      <canvas ref="pdfCanvas"></canvas>
    </div> -->
    <canvas v-for="page in pdfPageCount" :id="'pdfCanvas' + page" :key="page" class="pdf-canvas"></canvas>

    <!-- <div class="offices pdf">
      <div ref="canvasScrollDom" class="canvas-container">
        <div ref="pdfScrollBox" class="pdf-scroll-box">
          <canvas v-for="page in pdfPageCount" :id="'pdfCanvas' + page" :key="page" class="pdf-canvas"></canvas>
        </div>
      </div>
    </div> -->

    <div class="toolbar">
      <button @click="zoomIn">
        放大
      </button>
      <button @click="zoomOut">
        缩小
      </button>
    </div>
  </div>
</template>

<script>
// import * as pdfjsLib from 'pdfjs-dist/build/pdf'
const pdfJS = require('pdfjs-dist')
pdfJS.GlobalWorkerOptions.workerSrc = require('pdfjs-dist/build/pdf.worker.entry')

export default {
  name: 'PdfViewer',
  // props: {
  //   src: {
  //     type: String,
  //     required: true
  //   }
  // },
  data () {
    return {
      pdfPageCount: null,
      pdf: null,
      pageNum: 1,
      scale: 1.5,
      maxScale: 4,
      minScale: 0.25
    }
  },
  mounted () {
    this.loadPDF()
  },
  methods: {

    zoomIn () {
      if (this.scale < this.maxScale) {
        this.scale += 0.1
        console.log('this.scale', this.scale)
        this.renderPage(this.pageNum)
      }
    },
    zoomOut () {
      if (this.scale > this.minScale) {
        this.scale -= 0.1
        console.log('this.scale', this.scale)
        this.renderPage(this.pageNum)
      }
    },
    async loadPDF () {
      const url = 'http://static.shanhuxueyuan.com/test.pdf'
      // const url = 'http://127.0.0.1:8014/HXCloud/test1.pdf'
      // const url = 'http://127.0.0.1:8014/HXCloud/test2.pdf'
      const loadingTask = pdfJS.getDocument(url)
      this.pdf = await loadingTask.promise
      this.renderPage(this.pageNum)
    },
    async renderPage (num) {
      this.pageNum = num
      const page = await this.pdf.getPage(num)
      this.pdfPageCount = page.pageNumber
      // console.log('page', page)
      // console.log('this.pdfPageCount', this.pdfPageCount)
      // debugger
      this.$nextTick(() => {
        setTimeout(() => {
          // debugger
          this.drawCanvas({ page, index: 1 }, () => {
            // if()
          })
        }, 200)
      })
      // const viewport = page.getViewport({ scale: this.scale })

      // // const canvas = this.$refs.pdfCanvas
      // const canvas = document.getElementById('pdfCanvas' + index)
      // const context = canvas.getContext('2d')

      // const dpr = window.devicePixelRatio || 1
      // const bsr = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1
      // const ratio = dpr / bsr
      // debugger
      // canvas.width = viewport.width * ratio
      // canvas.height = viewport.height * ratio
      // context.setTransform(ratio, 0, 0, ratio, 0, 0)

      // // canvas.height = viewport.height
      // // canvas.width = viewport.width

      // const renderContext = {
      //   canvasContext: context,
      //   viewport: viewport
      // }
      // page.render(renderContext)
    },
    drawCanvas ({ page, index }) {
      const _this = this
      const canvas = document.getElementById('pdfCanvas' + index)
      // debugger
      const context = canvas.getContext('2d')
      const viewport = page.getViewport({
        scale: _this.scale
        // rotation: _this.config.rotation
      })

      const dpr = window.devicePixelRatio || 1
      const bsr = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1
      const ratio = dpr / bsr
      debugger
      canvas.width = viewport.width * ratio
      canvas.height = viewport.height * ratio
      context.setTransform(ratio, 0, 0, ratio, 0, 0)

      // canvas.height = viewport.height
      // canvas.width = viewport.width

      // // console.log(canvas.width, canvas.height)

      // canvas.style.width = viewport.width + 'px'
      // canvas.style.height = viewport.height + 'px'

      // 将 PDF 页面渲染到 canvas 上下文中
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      }
      page.render(renderContext)
    }
  }
}
</script>

<!-- <style scoped>
.content-box {
  height: 98vh;
  overflow: hidden;
}
.pdf-container {
  width: 100%;
  height: 800px;
  overflow: auto;
  position: relative;
}

.toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
}

canvas {
  border: 1px solid black;
}
</style> -->

<style scoped lang="scss">
$curViewW: 800px;
$curViewH: 500px;
$thumbBW: 120px;
$thumbPd: 10px;
.offices.pdf::-webkit-scrollbar {
  width: 0;
}
.offices-box {
  // padding: 20px;
  background: #eee;
  .offices.pdf {
    position: relative;
    margin: 20px auto;
    padding: 10px 0;
    width: calc(100% - 300px);
    height: calc(100vh - 80px);
    overflow-y: auto;
    background: #eee;
    .canvas-container {
      position: relative;
      // margin: 20px 0;
      width: 100%;
      height: 100%;
      // width: 76vw;
      // height: 90vh;
      overflow: hidden;
      overflow-y: auto;
      .pdf-scroll-box {
        // margin: 20px;
        margin: 0 auto;
        width: 60%;
        min-width: 700px;
        height: auto;
        flex-direction: column;
      }
    }
  }
  .pdf-canvas {
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .viewer-thumb-box::-webkit-scrollbar {
    width: 0;
  }
  .viewer-thumb-box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: $thumbBW;
    height: calc(100vh - 40px);
    overflow: hidden;
    overflow-y: auto;
    background-color: #0a0a0a;
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.6);
    .thumb-ul {
      padding: $thumbPd;
      .thumb-img {
        margin-bottom: 10px;
        width: $thumbBW - $thumbPd * 2;
        border: 1px solid #eee;
        opacity: 0.6;
        cursor: pointer;
        &:hover,
        &.act {
          opacity: 1;
        }
        .thumb-img-cls {
          display: inline-block;
          width: 100%;
          height: 100%;
          background-color: #fff;
          background-size: cover;
        }
      }
    }
  }
}
</style>
